<template>
	<view class="home">
		<danya-nav-bar title="泉州"></danya-nav-bar>
		<view class="fill" :style="{height:getNavBarHeight()+'px'}"></view>
		<view class="fill" :style="{height:getNavBarHeight()+'px'}"></view>
		<view class="banner">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)"
			 indicator-active-color="#fff" autoplay="true">
				<swiper-item >
					<image src="../../static/home/u623.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item >
					<image src="../../static/home/u624.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item >
					<image src="../../static/home/u625.png" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="JobReferrals">
			<view class="item">
				<image class="itemImage" src="../../static/home/u668.png" mode="aspectFill"></image>
				<text class="itemText">家政职位</text>
			</view>
			<view class="item">
				<image class="itemImage" src="../../static/home/u669.png" mode="aspectFill"></image>
				<text class="itemText">技工职位</text>
			</view>
			<view class="item">
				<image class="itemImage" src="../../static/home/u671.png" mode="aspectFill"></image>
				<text class="itemText">建筑职位</text>
			</view>
			<view class="item">
				<image class="itemImage" src="../../static/home/u672.png" mode="aspectFill"></image>
				<text class="itemText">兼职职位</text>
			</view>
		</view>
		
		<view class="HireNow">
			<image class="HireImage" src="../../static/home/u1197.jpg" mode=""></image>
			<view class="Hire">
				<view class="HireBao">
					<text class="CattlePeople">我要招牛人</text>
					<text class="Job">我要找工作</text>
					<view class="HireContent">
						<text class="HireTitle">企业招聘无年费，按招聘效果付费</text>
						<text class="purchase">购买人才简历/人才包套餐/悬裳招聘</text>
					</view>
					<uni-button class="now" :plain="true" >立即加入</uni-button>
				</view>
			</view>
		</view>
		<view class="OpenAStoreToBuy">
			<view class="OpenAStore">
				<image class="OpenImage" src="../../static/home/u643.png" mode=""></image>
				<view class="OpenBao">
					<view class="Openxiaobao">
						<text class="Opentitle">一键开店</text>
						<image class="youjiantouImage" src="../../static/home/youjiantou.png"></image>
					</view>
					<text class="Opencontent">在劳务通开店赚钱</text>
				</view>
			</view>
			<view class="purchase">
				<image class="OpenImage" src="../../static/home/u650.png" mode=""></image>
				<view class="OpenBao">
					<view class="Openxiaobao">
						<text class="Opentitle">购买人才币</text>
						<image class="youjiantouImage" src="../../static/home/youjiantou.png"></image>
					</view>
					<text class="Opencontent">优质人才等你来聊</text>
				</view>
				
			</view>
		</view>
		<view class="RecruitmentHeadlines">
			<image class="RecruitmentHeadlinesImage" src="../../static/home/u651.png" mode="widthFix"></image>
			<view class="RecruitmentHeadlineContent">
				<view class="RecruitmentHeadlineContentTop">
					<image class="dot" src="../../static/home/u653.png" mode="widthFix"></image>
					<text>全免费!年度招聘盛会，错过再等一年!</text>
				</view>
				<view class="RecruitmentHeadlineContentButtom">
					<image class="dot" src="../../static/home/u653.png" mode="widthFix"></image>
					<text>商家开店教程精选-发展业务员</text>
				</view>
			</view>
		</view>
		
		<view class="posts">
			<view class="uni-margin-wrap">
				<swiper class="swiper" >
					<swiper-item>
						<view class="swiper-item uni-bg-red">推荐职位</view>
						<view class="swiper-item uni-bg-green">赏金职位</view>
						<view class="swiper-item uni-bg-blue">白领职位</view>
						<view class="swiper-item uni-bg-blue">蓝领职位</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="">
				<view class="">
					<view class="">
						<view class="">
							<text></text>
						    <text></text>
						</view>
						<view class="">
							<view class="">
								
							</view>
						</view>
					</view>
					<view class="">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { getStatusBarHeight,getTitleBarHeight,getNavBarHeight,getLeftIconLeft } from "@/utils/system.js"


</script>

<style lang="scss" scoped>
	.home{
		.banner{
			/* #ifdef MP */
			margin-top: -65rpx;
			/* #endif */
			/* #ifndef MP */
			margin-top: 20rpx;
			/* #endif */
			width: 750rpx;
			swiper{
				width: 750rpx;
				height: 350rpx;
				&-item{
					box-sizing: border-box;
					width: 100%;
					height: 100%;
					padding: 35rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}
		.JobReferrals{
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 30rpx;
			height: 150rpx;
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;
				height: 100%;
				.itemImage{
					width: 100rpx;
					height: 100rpx;
				}
				.itemText{
					font-size: 25rpx;
				}
			}
		}
		.HireNow{
			position: relative;
			.HireImage{
				width: 740rpx;
				height: 350rpx;
			}
			.Hire{
				position: absolute;
				box-sizing: border-box;
				top: 0;
				left: 0;
				z-index: 5;
				display: flex;
				height: 100%;
				width: 100%;
				padding: 30rpx;
				
				.HireBao{
					box-sizing: border-box;
					width: 100%;
					padding: 30rpx;
					
					.CattlePeople{
						height: 50rpx;
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 20rpx;
					}
					.Job{
						height: 50rpx;
						
						
					}
					.HireContent{
						
						padding-bottom: 30rpx;
						padding-top: 30rpx;
						
						display: flex;
						align-content: center;
						justify-content: space-between;
						flex-direction: column;
						.HireTitle{
							font-size: 30rpx;
							font-weight: bold;
							padding-bottom: 10rpx;
						}
						.purchase{
							font-size: 25rpx;
						}
					}
					.now{
						padding: 15rpx;
						
						display: flex;
						justify-content: center;
						background-color: transparent;
						font-size:35rpx ;
						color: #0D9FE8;
					}
				}
				
			}
		}
		.OpenAStoreToBuy{
			margin: 20rpx 0;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-content: center;
			.OpenImage{
				width: 80rpx;
				height: 80rpx;
			}
			.OpenAStore,.purchase{
				height: 120rpx;
				width: 330rpx;
				border: 1px solid #ccc;
				box-shadow: 0 0 8rpx rgba(190, 190, 190, 0.7);
				border-radius: 10rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.OpenBao{
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					flex-direction: column;
					.Openxiaobao{
						display: flex;
						justify-content: space-evenly;
						width: 100%;
						.Opentitle{
							font-size: 30rpx;
							font-weight: bold;
							display: flex;
							justify-content: center;
						}
						.youjiantouImage{
							width: 45rpx;
							height: 45rpx;
						}
					}
					.Opencontent{
						font-size: 25rpx;
						color: #999;
					}
				}
				
			}
			
		}
		.RecruitmentHeadlines{
			padding: 20rpx;
			position: relative;
			.RecruitmentHeadlinesImage{
				width: 700rpx;
				height: 200rpx;
			}
			.RecruitmentHeadlineContent{
				position: absolute;
				top: 45rpx;
				left: 180rpx;
				.RecruitmentHeadlineContentTop,.RecruitmentHeadlineContentButtom{
					padding: 5rpx;
					.dot{
						width: 20rpx;
						height: 10rpx;
						padding-right: 20rpx;
					}
				}
			}
		}
		.posts{
			border: 1px solid red;
			height: 1500rpx;
			.uni-margin-wrap{
				border: 1px solid red;
				height: 80rpx;
				.swiper{
					width: 500rpx;
					height: 80rpx;
					border: 1px solid red;
					display: flex;
					justify-content: space-around;
					align-items: center;
					
				}
			}
		}
	}
	
</style>
